<template>
  <div class="common-layout">
    <el-container>
      <el-header class="bg-white">
        <div class="float-left w-40">
          <img :src="getSettingbyKey('home_logo')" class="mt-3" />
        </div>
        <div class="float-right" style="width: 100px; margin-top: 20px">
          <login />
        </div>
      </el-header>
      <el-container class="mt-2">
        <el-aside width="200px" class="bg-white m-2 h-90vh ml-4" style="border-radius: 12px">
          <div class="py-2 text-center bg-yellow-400 text-white">{{ vipinfo.vipName }}</div>

          <el-menu class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
            <el-menu-item index="1" @click="handleSelect(1)">
              <img :src="getSettingbyKey('生成的码')" mode="scaleToFill" class="w-8 h-8 mr-4" />
              <span>生成的码</span>
            </el-menu-item>
            <el-menu-item index="2" @click="handleSelect(2)">
              <img :src="getSettingbyKey('我扫的码')" mode="scaleToFill" class="w-8 h-8 mr-4" />
              <span>我扫的码</span>
            </el-menu-item>
            <el-menu-item index="3" @click="handleSelect(3)">
              <img
                :src="'https://ecodestore.oss-cn-beijing.aliyuncs.com/%E6%96%B0%E7%89%88UI%E5%9B%BE%E6%A0%87/ICON%E4%BA%BF%E7%A0%81%E4%BA%92%E8%81%94%E5%9B%BE%E6%A0%87/%E5%B7%A5%E4%BD%9C%E5%8F%B0/%E5%88%A0%E9%99%A4.png'"
                mode="scaleToFill"
                class="w-8 h-6 mr-4"
              />
              <span>删除的码</span>
            </el-menu-item>
            <el-menu-item index="4" @click="handleSelect(4)">
              <img
                :src="'https://ecodestore.oss-cn-beijing.aliyuncs.com/%E6%96%B0%E7%89%88UI%E5%9B%BE%E6%A0%87/ICON%E4%BA%BF%E7%A0%81%E4%BA%92%E8%81%94%E5%9B%BE%E6%A0%87/%E5%B7%A5%E4%BD%9C%E5%8F%B0/%E6%94%B6%E8%97%8F.png'"
                mode="scaleToFill"
                class="w-8 h-8 mr-4"
              />
              <span>收藏的码</span>
            </el-menu-item>
            <el-menu-item index="5" @click="handleSelect(5)">
              <img
                :src="'https://ecodestore.oss-cn-beijing.aliyuncs.com/%E6%96%B0%E7%89%88UI%E5%9B%BE%E6%A0%87/ICON%E4%BA%BF%E7%A0%81%E4%BA%92%E8%81%94%E5%9B%BE%E6%A0%87/%E5%B7%A5%E4%BD%9C%E5%8F%B0/%E5%8A%9F%E8%83%BD.png'"
                mode="scaleToFill"
                class="w-8 h-8 mr-4"
              />
              <span>扫码统计</span>
            </el-menu-item>
            <el-menu-item index="6" @click="handleSelect(6)">
              <img
                :src="'https://ecodestore.oss-cn-beijing.aliyuncs.com/%E6%96%B0%E7%89%88UI%E5%9B%BE%E6%A0%87/ICON%E4%BA%BF%E7%A0%81%E4%BA%92%E8%81%94%E5%9B%BE%E6%A0%87/%E5%B7%A5%E4%BD%9C%E5%8F%B0/%E6%89%AB%E7%A0%81%E7%BB%9F%E8%AE%A1.png'"
                mode="scaleToFill"
                class="w-8 h-8 mr-4"
              />
              <span>使用统计</span>
            </el-menu-item>
            <el-menu-item index="9" @click="handleSelect(9)">
              <img :src="getSettingbyKey('申请加盟')" mode="scaleToFill" class="w-8 h-8 mr-4" />
              <span>申请加盟</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-container>
          <el-main class="bg-white m-2 mr-4 h-80vh" style="border-radius: 12px">
            <component :is="activePage"></component>
          </el-main>
          <el-footer class="bg-white m-2 mr-4 h-10vh" style="border-radius: 12px">
            <p class="text-center pt-5">
              中科元创（苏州）动画科技有限公司 Copyright © 2024 All Rights Reserved
              <a href="https://beian.miit.gov.cn/" class="ml-6" target="_blank">苏ICP备2023006373号</a>
            </p>
          </el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
  <el-popover ref="popoverRef" :visible="popoverShow" width="200px" trigger="click" virtual-triggering persistent>
    <div>
      <el-menu default-active="1" class="el-menu-vertical-demo" @select="handleSelect">
        <el-menu-item index="1">
          <el-icon>
            <Avatar />
          </el-icon>
          <span>个人信息</span>
        </el-menu-item>
        <el-menu-item index="2">
          <el-icon>
            <Grid />
          </el-icon>
          <span>管理后台</span>
        </el-menu-item>
        <el-menu-item index="3">
          <el-icon>
            <PieChart />
          </el-icon>
          <span>扫码统计</span>
        </el-menu-item>

        <el-menu-item index="4">
          <el-icon>
            <SwitchButton />
          </el-icon>
          <span>安全退出</span>
        </el-menu-item>
      </el-menu>
    </div>
  </el-popover>
</template>

<script setup>
import { ref, reactive, toRefs, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { getSettingbyKey } from '@/utils/index.js';
import { ClickOutside as vClickOutside } from 'element-plus';
//import { xxx } from '@/api/index.js';
import login from '@/views/components/index/login.vue';
import HomePage from '../views/admin/index.vue';
import scdm from '../views/admin/scdm.vue';
import wsdm from '../views/admin/wsdm.vue';
import sclist from '../views/admin/sclist.vue';
import sc from '../views/admin/sc.vue';
import d1 from '../views/admin/data1.vue';
import d2 from '../views/admin/data2.vue';
import ang from '../views/admin/anget.vue';
const activePage = ref(HomePage); // 默认显示的页面组件

const handleSelect = (key) => {
  console.log('key', key);
  // 根据key来设置activePage
  switch (key) {
    case 1:
      activePage.value = scdm;
      break;
    case 2:
      activePage.value = wsdm;
      break;
    case 3:
      activePage.value = sclist;
      break;
    case 4:
      activePage.value = sc;
      break;
    case 5:
      activePage.value = d1;
      break;
    case 6:
      activePage.value = d2;
      break;
    case 9:
      activePage.value = ang;
      break;
    // ... 其他case
  }
  console.log('activePage.value', activePage.value);
};

const showToast = inject('showToast');
const loading = ref(true);
const popoverRef = ref();
const popoverShow = ref(false);
const userinfo = ref({});
const vipinfo = ref({});
//localStorage.setItem('userinfo', '{"createBy":null,"createTime":null,"updateBy":null,"updateTime":null,"remark":null,"id":1,"uWxOpenid":"oMeua61EGEYZcJebCHPWpaWFaYNI","uPhone":"18624024313","uNikename":"羽然香","ueId":null,"uAvatar":"https://ecodeuserstore.oss-cn-beijing.aliyuncs.com/UserAvatar/YfidCMsBwn.jpeg","uShareratio":null,"createdTime":"2024-04-19 05:17:00","updatedTime":null,"uState":0,"pDistribuUserid":null,"uLevel":null,"isDistritution":null,"uVipLevel":null,"limitImgtxtone":6291456,"limitImgtxtsum":100,"limitAudiovideoone":62914560,"limitAudiovideosum":100,"vipName":"vip1","user_companyName":null}')
userinfo.value = JSON.parse(localStorage.getItem('userinfo'));
vipinfo.value = JSON.parse(localStorage.getItem('vipinfo'));
/**点击空白处隐藏 */
const onClickOutside = (e) => {
  console.log('onClickOutside', e);
  if (popoverShow.value && !unref(popoverRef).popperRef.contentRef.contains(e.target)) {
    popoverShow.value = false;
  }
};
onMounted(() => {});
</script>
<style scoped lang="less">
.common-layout {
  height: 100vh;
  width: 100vw;
  background-color: #e5eaf3;
}
</style>

